import React, { useState } from "react";
import { Button, Space, NavBar, Card, List } from "antd-mobile";
import "./App.css";
import MyTickList from "./component/MyTickList";
import { Popup, Modal, Form, Input } from "antd-mobile";
import { addTick } from "./store/TickpersonSlice";
import { useDispatch } from "react-redux";
const App = () => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const handleToAddList = () => {
    setVisible(true);
    form.resetFields();
  };
  const dispatch = useDispatch();
  const onFinish = () => {
    const addobj = { ...form.getFieldsValue(), id: Date.now(), state: false };
    dispatch(addTick(addobj));
    setVisible(false);
  };
  return (
    <div>
      <NavBar>乘客订单页</NavBar>
      <div className="addTk">
        <Button size="small" color="primary" onClick={() => handleToAddList()}>
          添加乘客
        </Button>

        <MyTickList></MyTickList>
      </div>

      <Modal
        visible={visible}
        content={
          <Form
            layout="horizontal"
            form={form}
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>水平布局表单</Form.Header>
            <Button block color="primary" size="large">
              上传证件
            </Button>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="code"
              label="身份证"
              rules={[{ required: true, message: "身份证不能为空" }]}
            >
              <Input placeholder="请输入身份证" />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default App;
